<template>
	<div class="paper-wrap">
		<n-card>
			<!-- 学生的基本信息 -->
			<div class="paper-title">
				<h2>{{ expName }}</h2>
				<div class="stu-info">
					<div class="stu-info-item">
						<span>学号：</span>
						<span>{{ sid }}</span>
					</div>
					<div class="stu-info-item">
						<span>姓名：</span>
						<span>{{ name }}</span>
					</div>
					<div class="stu-info-item">
						<span>班级：</span>
						<span>{{ cid }}</span>
					</div>
				</div>
			</div>

			<div class="paper-data">
				<!-- 第一个表单 -->
				<h3>(一) 基本量测量 </h3>
				<el-form
					:form="model1"
					style="font-size: 19px"
					label-width="160px"
					label-position="left"
				>
					<el-form-item label="测量前蓖麻油的温度" style="width: 35%">
						<!-- <el-input
							v-model="model1.value1"
							@blur="getTime(0)"
						></el-input> -->
						<span style="font-size: 16px">{{ model[0].value }}</span
						>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
							style="font-size: 12px"
							>{{ model[0].timeStamp }}</span
						>
					</el-form-item>
					<el-form-item label="测量后蓖麻油的温度" style="width: 35%">
						<span style="font-size: 16px">{{
							model[1].value
						}}</span>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
							style="font-size: 12px"
							>{{ model[1].timeStamp }}</span
						>
					</el-form-item>
					<el-form-item
						label="两刻线A、B间的距离S"
						style="width: 35%"
					>
						<span style="font-size: 16px">{{ model[2].value }}</span
						>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
							style="font-size: 12px"
							>{{ model[2].timeStamp }}</span
						>
					</el-form-item>
					<el-form-item label="蓖麻油的密度" style="width: 35%">
						<span style="font-size: 16px">{{ model[3].value }}</span
						>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
							style="font-size: 12px"
							>{{ model[3].timeStamp }}</span
						>
					</el-form-item>
					<el-form-item label="小钢球密度p" style="width: 35%">
						<span style="font-size: 16px">{{ model[4].value }}</span
						>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
							style="font-size: 12px"
							>{{ model[4].timeStamp }}</span
						>
					</el-form-item>
				</el-form>
				<!-- 第二个表单 -->
				<h3>(二) 测定小球下落时间 </h3>
				<table
					border="1"
					style="
						width: 100%;
						border-collapse: collapse;
						border: 1px solid #000;
					"
				>
					<tr style="background: rgb(0, 0, 0, 0.1)">
						<td style="text-align: center">油管编号</td>
						<td style="text-align: center">小钢球下落时间t/s</td>
						<td style="text-align: center">t/s</td>
						<td style="text-align: center">圆筒内直径D/mm</td>
						<td style="text-align: center">d/D</td>
					</tr>
					<tr>
						<th>1</th>
						<td>
							<!-- <el-input
								type="text"
								v-model="model2.value1"
								@blur="getTime(5)"
							/> -->
							<div style="text-align: center"
								>{{
									model[5].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[5].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[6].value
								}}
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[6].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[7].value
								}}
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[7].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[8].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[8].timeStamp }}</span
								></div
							>
						</td>
					</tr>
					<tr>
						<th>2</th>
						<td>
							<div style="text-align: center"
								>{{
									model[9].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[9].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[10].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[10].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[11].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[11].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[12].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[12].timeStamp }}</span
								></div
							>
						</td>
					</tr>
					<tr>
						<th>3</th>
						<td>
							<div style="text-align: center"
								>{{
									model[13].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[13].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[14].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[14].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[15].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[15].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[16].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[16].timeStamp }}</span
								></div
							>
						</td>
					</tr>
					<tr>
						<th>4</th>
						<td>
							<div style="text-align: center"
								>{{
									model[17].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[17].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[18].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[18].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[19].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[19].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[20].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[20].timeStamp }}</span
								></div
							>
						</td>
					</tr>
					<tr>
						<th>5</th>
						<td>
							<div style="text-align: center"
								>{{
									model[21].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[21].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[22].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[22].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[23].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[23].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[24].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[24].timeStamp }}</span
								></div
							>
						</td>
					</tr>
				</table>
				<!-- 第三个表单 -->
				<h3>(三) 测定小钢球的直径 </h3>
				<table
					border="1"
					style="
						width: 100%;
						border-collapse: collapse;
						border: 1px solid #000;
					"
				>
					<tr style="background: rgb(0, 0, 0, 0.1)">
						<td style="text-align: center">测量次数</td>
						<td style="text-align: center">初读数</td>
						<td style="text-align: center">末读数</td>
						<td style="text-align: center">小球直径</td>
						<td style="text-align: center">d/mm</td>
						<td style="text-align: center"> 绝对误差</td>
						<td style="text-align: center">d/mm</td>
					</tr>
					<tr>
						<th>1</th>
						<td>
							<div style="text-align: center"
								>{{
									model[25].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[25].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[26].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[26].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[27].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[27].timeStamp }}</span
								></div
							>
						</td>
						<td rowspan="3">
							<div style="text-align: center"
								>{{
									model[28].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[28].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[29].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[29].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[30].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[30].timeStamp }}</span
								></div
							>
						</td>
					</tr>
					<tr>
						<th>2</th>
						<td>
							<div style="text-align: center"
								>{{
									model[31].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[31].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[32].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[32].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[33].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[33].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[34].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[34].timeStamp }}</span
								></div
							>
						</td>
						<td>
							<div style="text-align: center"
								>{{
									model[35].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[35].timeStamp }}</span
								></div
							>
						</td>

						<!-- <td>
							<input type="text" />
						</td> -->
					</tr>
					<tr>
						<th>3</th>
						<td>
							<div style="text-align: center"
								>{{
									model[36].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[36].timeStamp }}</span
								></div
							> </td
						><td>
							<div style="text-align: center"
								>{{
									model[37].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[37].timeStamp }}</span
								></div
							> </td
						><td>
							<div style="text-align: center"
								>{{
									model[38].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[38].timeStamp }}</span
								></div
							> </td
						><td>
							<div style="text-align: center"
								>{{
									model[39].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[39].timeStamp }}</span
								></div
							> </td
						><td>
							<div style="text-align: center"
								>{{
									model[40].value
								}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
									style="font-size: 12px"
									>{{ model[40].timeStamp }}</span
								></div
							>
						</td>

						<!-- <td>
							<input type="text" />
						</td> -->
					</tr>
				</table>
				<!-- <p
					>经系统计算： 测量次数为1的 d= 测量次数为2的 d=
					测量次数为3的 d= d = Δd1= Δd2= Δd3= Δd=</p
				> -->
				<!-- 第四个表单 -->
				<h3>(四)计算小球的收尾速度及蓖麻油的黏滞系数</h3>
				<el-form
					:form="model2"
					style="font-size: 19px"
					label-width="300px"
					label-position="left"
				>
					<el-form-item
						label="令x=d/D，y=t，用最小二乘法拟合得 y="
						style="width: 40%"
					>
						<div style="text-align: center"
							>{{
								model[41].value
							}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
								style="font-size: 12px"
								>{{ model[41].timeStamp }}</span
							></div
						>
					</el-form-item>
					<el-form-item
						label="由以上关系式得，截距t0="
						style="width: 40%"
					>
						<div style="text-align: center"
							>{{
								model[42].value
							}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
								style="font-size: 12px"
								>{{ model[42].timeStamp }}</span
							></div
						>
					</el-form-item>
					<el-form-item label="收尾速度v0=S/t0=" style="width: 40%">
						<div style="text-align: center"
							>{{
								model[43].value
							}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
								style="font-size: 12px"
								>{{ model[43].timeStamp }}</span
							></div
						>
					</el-form-item>
					<el-form-item label="蓖麻油的黏滞系数=" style="width: 40%">
						<div style="text-align: center"
							>{{
								model[44].value
							}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
								style="font-size: 12px"
								>{{ model[44].timeStamp }}</span
							></div
						>
					</el-form-item>
					<!-- <el-form-item label="小钢球密度p" style="width: 35%">
						<el-input v-model="model1.value5"></el-input>
					</el-form-item> -->
				</el-form>
			</div>
			<!-- 第五个表单 -->
			<n-divider title-placement="left"><h2>五、实验分析</h2></n-divider>
			<div class="paper-analyze">
				<div style="margin-bottom: 10px; font-size: 17px"
					>1.为什么金属小球放进蓖麻油中时应尽量靠近油面并使其沿圆筒的轴线下落?</div
				>
				<div style="margin-bottom: 20px; font-size: 16px"
					>{{ model[45].value }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="font-size: 12px"
						>{{ model[45].timeStamp }}</span
					></div
				>
				<div style="margin-bottom: 10px; font-size: 16px"
					>2. 请对本实验产生误差的原因作出分析:</div
				>
				<div style=""
					>{{ model[46].value }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="font-size: 12px"
						>{{ model[46].timeStamp }}</span
					></div
				>
			</div>
			<div class="button" style="display: flex">
				<el-button type="primary" @click="exOk()">通过</el-button>
				<el-button type="success" @click="exFix()">需要修改</el-button>
			</div>
		</n-card>
	</div>
</template>
<script setup lang="ts">
//@ts-nocheck
// 关闭ts检查
// @ts-nocheck
import { ref, computed, nextTick, onMounted } from 'vue'
import { NInput } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { getDetailEx, changeState } from '@/api/request'
const route = useRoute()
// 试卷头的基本信息
// 使用onMounted生命周期函数
const jwtToken = localStorage.getItem('jwtToken')

onMounted(() => {
	// name.value = localStorage.getItem('name')
	// sno.value = localStorage.getItem('snoId')
	// sClass.value = localStorage.getItem('className')
	// expName.value = localStorage.getItem('expName')
	console.log('姓名', name.value)

	// 获取保存的信息
	getDetailEx(jwtToken, eid, rid).then((res) => {
		console.log(res.data.data[0], 'socket数据')
		model.value.forEach((element) => {
			var obj = element
			var kid = obj.kid
			if (res.data.data[0].hasOwnProperty(kid)) {
				obj.value = res.data.data[0][kid]
				obj.timeStamp = res.data.data[0]['t' + kid]
			}
		})
		console.log('处理后', model.value)
	})
})
const cid = route.query.cid
const sid = route.query.sid
const rid = route.query.rid
const eid = route.query.eid
const name = route.query.name
// 处理数据
// model.value = model.value.map((item) => ({
// 		role:"student",
// 		sourceId: sid,
// 		rid: rid.value,
// 		destId: tid.value,
// 		eid:"3",
// 		kid: item.kid,
// 		// 返回这个对象中第一个属性的value值
// 		value: item.value,
// 		timeStamp: item.timeStamp,
// 	}))
const ws = new WebSocket(`ws://210.44.37.172:8082/message?id=1000&role=teacher`)
ws.onopen = function (e) {
	console.log('连接成功')
	// ws.send(
	// 	// '{"rid":"2002","tid":"3000","kid":"3000","value":"3.33","timeStamp":"3.2.3"}'
	// 	'{"role":"student","sourceId":"sid","eid":"","rid":"2002","destId":"tid","kid":"3000","value":"3.33","timeStamp":"3.2.3"}'
	// )
}
ws.onmessage = function (e) {
	console.log(e.data, '接收返回的消息')
	console.log(JSON.parse(e.data), '解析一下的数据')
	if (JSON.parse(e.data).rid == rid) {
		model.value.forEach((element) => {
			if (element.kid == JSON.parse(e.data).kid) {
				element.value = JSON.parse(e.data).value
				element.timeStamp = JSON.parse(e.data).timeStamp
			}
		})
	}
}
ws.onclose = function () {
	console.log('连接关闭')
}
ws.onerror = function () {
	console.log('连接出错')
}
// 学生填的值
const model = ref([
	{ kid: 'k1', value: '', timeStamp: '' },
	{ kid: 'k2', value: '', timeStamp: '' },
	{ kid: 'k3', value: '', timeStamp: '' },
	{ kid: 'k4', value: '', timeStamp: '' },
	{ kid: 'k5', value: '', timeStamp: '' },
	{ kid: 'k6_1', value: '', timeStamp: '' },
	{ kid: 'k6_2', value: '', timeStamp: '' },
	{ kid: 'k6_3', value: '', timeStamp: '' },
	{ kid: 'k6_4', value: '', timeStamp: '' },
	{ kid: 'k7_1', value: '', timeStamp: '' },
	{ kid: 'k7_2', value: '', timeStamp: '' },
	{ kid: 'k7_3', value: '', timeStamp: '' },
	{ kid: 'k7_4', value: '', timeStamp: '' },
	{ kid: 'k8_1', value: '', timeStamp: '' },
	{ kid: 'k8_2', value: '', timeStamp: '' },
	{ kid: 'k8_3', value: '', timeStamp: '' },
	{ kid: 'k8_4', value: '', timeStamp: '' },
	{ kid: 'k9_1', value: '', timeStamp: '' },
	{ kid: 'k9_2', value: '', timeStamp: '' },
	{ kid: 'k9_3', value: '', timeStamp: '' },
	{ kid: 'k9_4', value: '', timeStamp: '' },
	{ kid: 'k10_1', value: '', timeStamp: '' },
	{ kid: 'k10_2', value: '', timeStamp: '' },
	{ kid: 'k10_3', value: '', timeStamp: '' },
	{ kid: 'k10_4', value: '', timeStamp: '' },
	{ kid: 'k11_1', value: '', timeStamp: '' },
	{ kid: 'k11_2', value: '', timeStamp: '' },
	{ kid: 'k11_3', value: '', timeStamp: '' },
	{ kid: 'k11_4', value: '', timeStamp: '' },
	{ kid: 'k11_5', value: '', timeStamp: '' },
	{ kid: 'k11_6', value: '', timeStamp: '' },
	{ kid: 'k12_1', value: '', timeStamp: '' },
	{ kid: 'k12_2', value: '', timeStamp: '' },
	{ kid: 'k12_3', value: '', timeStamp: '' },
	{ kid: 'k12_4', value: '', timeStamp: '' },
	{ kid: 'k12_5', value: '', timeStamp: '' },
	{ kid: 'k13_1', value: '', timeStamp: '' },
	{ kid: 'k13_2', value: '', timeStamp: '' },
	{ kid: 'k13_3', value: '', timeStamp: '' },
	{ kid: 'k13_4', value: '', timeStamp: '' },
	{ kid: 'k13_5', value: '', timeStamp: '' },
	{ kid: 'k14', value: '', timeStamp: '' },
	{ kid: 'k15', value: '', timeStamp: '' },
	{ kid: 'k16', value: '', timeStamp: '' },
	{ kid: 'k17', value: '', timeStamp: '' },
	{ kid: 'k18', value: '', timeStamp: '' },
	{ kid: 'k19', value: '', timeStamp: '' },
])

// const name = ref('密里根')
// const sno = ref('')
// const sClass = ref('')
// const expName = ref('')

// 复选框的状态
const checked = ref(new Array(47).fill(true))
// 复选框状态发生改变
const getState = function () {
	console.log(checked.value)
}
// 实验通过
const exOk = () => {
	changeState(jwtToken, rid, 0).then((res) => {
		console.log(res)
		ElMessage.success('已通过')
	})
}
const exFix = () => {
	changeState(jwtToken, rid, 2).then((res) => {
		console.log(res)
		ElMessage.success('反馈成功')
	})
}
</script>

<style lang="less" scoped></style>
